<template>
  <div class="z">
    <div style="height: 730;width: 450px;margin: auto;">

      <div class="content">
        <div>
          <img src="../../public/img/图1.png" class="tplog">
        </div>
        <div><img src="../../public/img/图2.png" class="tpp"></div>

        <div><img src="../../public/img/图4.png" class="tpk"></div>
        <!-- k座停车场 -->
        <div class="car">
          <div class="carc">
            <div class="carw"><img src="../../public/img/图3.png" class="tpcar"></div>
            <Mynum class="num" :quantity="quantity" :delayed="delayed" :number="number" :time="time" :timing="timing"
              @childEvent="handleChildEvent" />
          </div>

        </div>


        <div><img src="../../public/img/图5.png" class="tpx"></div>

      </div>



    </div>


  </div>
</template>

<script>
import Mynum from '../components/nub.vue'
import { defineComponent } from 'vue'
import axios from 'axios';

export default defineComponent({
  data() {
    return {

      quantity: 2, // 默认2个
      delayed: false, // 从零变
      number: 0,// 数字
      time: 1000, // 过度时间
      timing: "ease", // 过度动画速度

    };
  },
  components: {
    Mynum
  },
  mounted() {
    // 初始请求并启动定时器
    this.startFetching();
  },

  computed: {

  },
  watch: {

  },
  methods: {
    add() {
      this.number += 1
    },

    subtraction() {
      this.number -= 1
    },
    handleChildEvent(value) {
      this.number = value; // 处理从子组件接收到的数据
    },
    fetchData() {
      axios.get('/api.php')
        .then(response => {
          // 确保返回结果的格式是您期望的
          if (response.data && response.data.result && response.data.result.k_available !== undefined) {
            this.number = response.data.result.k_available;
          } else {
            console.error('Invalid response format:', response.data);
          }
        })
        .catch(error => {
          console.error('Error fetching data: ', error);
        });

    },
    // 调用fetchData方法，每5秒钟请求一次
    startFetching() {
      this.fetchData();
      setInterval(() => {
        this.fetchData();
      }, 5000);
    }

  },
})
</script>

<style scoped>
.content {
  width: 450px;
  height: 730px;
  background-color: #243d93;
  margin: auto;
}

.tplog {
  width: 200px;
  display: block;
  margin-left: 10px;
  padding-top: 10px;

}

.tpp {
  width: 400px;
  margin-top: 20px;
}

.tps {
  width: 180px;
  margin-left: -180px;
  margin-top: 5px;

}

.car {
  background-color: black;
  width: 360px;
  height: 166px;
  margin: auto;
  margin-top: 10px;
}

.carc {
  background-color: black;
  width: 360px;
  height: 166px;
  margin: auto;
  margin-top: 10px;
  display: flex;
}

.carw {
  height: 166px;
}

.tpcar {
  width: 200px;
  margin-top: 50px;
  margin-left: 10px;
}

.num {
  width: 200px;
  height: 100px;
  background-color: black;
}

.tpk {
  width: 200px;
  width: 180px;
  margin-left: -180px;
  margin-top: 20px;

}

.tpx {
  width: 90%;
  margin-top: 10px;
}
</style>